<template>
  <div class="circle-chart">
    <div class="chart-container">
      <!-- 背景光晕效果 -->
      <div class="background-aura"></div>
      
      <!-- 外圈命盘 -->
      <div class="outer-circle">
        <!-- 八卦线装饰 -->
        <div class="bagua-decoration"></div>
      </div>
      
      <!-- 中间圆圈 -->
      <div class="middle-circle"></div>
      
      <!-- 中心圆 -->
      <div class="center-circle">
        <!-- 阴阳图案背景 -->
        <div class="yinyang-symbol">
          <span>☯</span>
        </div>
        
        <div class="name">{{ userInfo.name }}</div>
        <div class="birth-date">
          {{ calendarType }}: {{ userInfo.birthYear }}年{{ userInfo.birthMonth }}月{{ userInfo.birthDay }}日
        </div>
        <div class="current-year">流年：{{ userInfo.currentYear }}年</div>
        <!-- 天干地支纪年 -->
        <div class="chinese-year">{{ getChineseYear(userInfo.birthYear) }}</div>
      </div>
      
      <!-- 宫位圆点 -->
      <div 
        v-for="palace in chartData.palaces" 
        :key="palace.name"
        :class="['palace-node', getPalacePositionClass(palace.position)]"
        :title="`${palace.name} (${getEarthlyBranch(palace.position)})`"
      >
        <div class="palace-name">{{ palace.name }}</div>
        <div class="palace-position">{{ getEarthlyBranch(palace.position) }}宫</div>
        <div v-if="hasMajorStars(palace.position)" class="palace-stars">
          {{ getPalaceMainStarsShort(palace.position) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CircleChart',
  props: {
    chartData: Object,
    userInfo: Object
  },
  computed: {
    calendarType() {
      return this.userInfo.birthSystem === 'solar' ? '阳历' : '农历';
    }
  },
  methods: {
    getEarthlyBranch(position) {
      const branches = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
      return branches[(position - 1) % 12];
    },
    
    getChineseYear(year) {
      const tianGan = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'];
      const diZhi = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
      const tianGanIndex = (year - 4) % 10;
      const diZhiIndex = (year - 4) % 12;
      return `${tianGan[tianGanIndex]}${diZhi[diZhiIndex]}年`;
    },
    
    getPalacePositionClass(position) {
      return `position-${position}`;
    },
    
    hasMajorStars(position) {
      return this.getPalaceMainStars(position).length > 0;
    },
    
    getPalaceMainStars(position) {
      if (!this.chartData || !this.chartData.stars) return [];
      
      const mainStarList = ['紫微', '天机', '太阳', '武曲', '天同', '廉贞', '天府', 
                           '太阴', '贪狼', '巨门', '天相', '天梁', '七杀', '破军'];
      
      return Object.entries(this.chartData.stars)
        .filter(([star, pos]) => pos === position && mainStarList.includes(star))
        .map(([star]) => star);
    },
    
    getPalaceMainStarsShort(position) {
      const stars = this.getPalaceMainStars(position);
      if (stars.length === 0) return '';
      
      // 限制显示的星曜数量，防止圆点内文字过多
      return stars.slice(0, 2).join('、') + (stars.length > 2 ? '...' : '');
    }
  }
};
</script>

<style lang="scss">
// 中国传统颜色变量
$imperial-gold: #d4af37;
$scroll-beige: #f5ecd9;
$cinnabar-red: #8a2924;
$jade-green: #286649;
$ochre-yellow: #c3832a;
$deep-brown: #6d3d14;
$pale-yellow: #fcf4dc;
$ink-black: #272829;

// 命盘整体样式
.circle-chart {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  
  .chart-container {
    position: relative;
    width: 100%;
    max-width: 36rem;
    aspect-ratio: 1 / 1;
    
    // 背景光晕
    .background-aura {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba($imperial-gold, 0.2) 0%, rgba($imperial-gold, 0) 70%);
      animation: pulse 3s infinite ease-in-out;
    }
    
    // 外圈命盘
    .outer-circle {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2px solid $deep-brown;
      background: linear-gradient(135deg, $pale-yellow, $scroll-beige);
      box-shadow: 0 0 15px rgba($imperial-gold, 0.3);
      overflow: hidden;
      
      // 八卦线装饰
      .bagua-decoration {
        position: absolute;
        inset: 0;
        opacity: 0.1;
        background-image: url('');
      }
    }
    
    // 中间圆圈
    .middle-circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      height: 80%;
      border-radius: 50%;
      border: 1px solid $ochre-yellow;
      opacity: 0.6;
    }
    
    // 中心圆
    .center-circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 33%;
      height: 33%;
      border-radius: 50%;
      border: 2px solid $deep-brown;
      background: linear-gradient(135deg, $pale-yellow, white);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0.5rem;
      text-align: center;
      box-shadow: 0 4px 12px rgba($deep-brown, 0.2);
      z-index: 10;
      
      // 阴阳图案
      .yinyang-symbol {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.1;
        
        span {
          font-size: 3rem;
          color: $deep-brown;
        }
      }
      
      // 中心文字
      .name {
        font-weight: bold;
        color: $deep-brown;
        margin-bottom: 0.2rem;
        position: relative;
        z-index: 1;
      }
      
      .birth-date {
        font-size: 0.75rem;
        color: $deep-brown;
        opacity: 0.9;
        position: relative;
        z-index: 1;
      }
      
      .current-year, .chinese-year {
        font-size: 0.75rem;
        color: $ochre-yellow;
        margin-top: 0.25rem;
        position: relative;
        z-index: 1;
      }
    }
    
    // 宫位节点
    .palace-node {
      position: absolute;
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
      border: 1px solid $ochre-yellow;
      background-color: white;
      box-shadow: 0 2px 6px rgba($deep-brown, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      transform: translate(-50%, -50%);
      transition: all 0.3s ease;
      cursor: help;
      z-index: 5;
      
      &:hover {
        background-color: rgba($pale-yellow, 0.9);
        box-shadow: 0 4px 10px rgba($deep-brown, 0.2);
        transform: translate(-50%, -50%) scale(1.05);
      }
      
      .palace-name {
        font-weight: bold;
        font-size: 0.875rem;
        color: $deep-brown;
      }
      
      .palace-position {
        font-size: 0.75rem;
        color: $ink-black;
        opacity: 0.7;
      }
      
      .palace-stars {
        margin-top: 0.25rem;
        font-size: 0.75rem;
        color: $cinnabar-red;
        font-weight: 500;
      }
    }
    
    // 宫位位置
    @for $i from 1 through 12 {
      .position-#{$i} {
        @if $i == 1 {
          top: 12%;
          left: 50%;
        } @else if $i == 2 {
          top: 20%;
          right: 20%;
          left: auto;
          transform: translate(50%, -50%);
          &:hover {
            transform: translate(50%, -50%) scale(1.05);
          }
        } @else if $i == 3 {
          top: 50%;
          right: 12%;
          left: auto;
          transform: translate(50%, -50%);
          &:hover {
            transform: translate(50%, -50%) scale(1.05);
          }
        } @else if $i == 4 {
          bottom: 20%;
          right: 20%;
          top: auto;
          left: auto;
          transform: translate(50%, 50%);
          &:hover {
            transform: translate(50%, 50%) scale(1.05);
          }
        } @else if $i == 5 {
          bottom: 12%;
          left: 50%;
          top: auto;
          transform: translate(-50%, 50%);
          &:hover {
            transform: translate(-50%, 50%) scale(1.05);
          }
        } @else if $i == 6 {
          bottom: 20%;
          left: 20%;
          top: auto;
          transform: translate(-50%, 50%);
          &:hover {
            transform: translate(-50%, 50%) scale(1.05);
          }
        } @else if $i == 7 {
          top: 50%;
          left: 12%;
          transform: translate(-50%, -50%);
        } @else if $i == 8 {
          top: 20%;
          left: 20%;
          transform: translate(-50%, -50%);
        } @else if $i == 9 {
          top: 30%;
          left: 35%;
          transform: translate(-50%, -50%);
        } @else if $i == 10 {
          top: 35%;
          right: 30%;
          left: auto;
          transform: translate(50%, -50%);
          &:hover {
            transform: translate(50%, -50%) scale(1.05);
          }
        } @else if $i == 11 {
          bottom: 30%;
          left: 35%;
          top: auto;
          transform: translate(-50%, 50%);
          &:hover {
            transform: translate(-50%, 50%) scale(1.05);
          }
        } @else if $i == 12 {
          top: 35%;
          left: 30%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}

// 动画
@keyframes pulse {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.2;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .circle-chart {
    .chart-container {
      .palace-node {
        width: 4rem;
        height: 4rem;
        
        .palace-name {
          font-size: 0.75rem;
        }
        
        .palace-position, .palace-stars {
          font-size: 0.625rem;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .circle-chart {
    .chart-container {
      .palace-node {
        width: 3.5rem;
        height: 3.5rem;
      }
    }
  }
}
</style>